import React, { Component } from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Dimensions,
  Animated, Image,Clipboard
} from 'react-native';
import { ToastToUser } from '../../../utils/CustomToast';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');
import { getImgUrl, getCarRegisterDate, getMileFormat, getPriceFormat, getStoreStatus, getSaleStatus, getCheckStatus, formatTimestamp } from '../../utils/ComFunction';



class BankInfoPop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      pageNo: 1,
      modalAnimation: new Animated.Value(0),
      isEnableLoadMore: true
    };
  }

  componentDidMount() {
    console.log('componentDidMount')
    if (this.props.visible) {
      this.animateIn();
    }
    console.log('this.props.receivePaymentBank',this.props.receivePaymentBank)
  }

  componentDidUpdate(prevProps) {
    if (this.props.visible && !prevProps.visible) {
      this.animateIn();
    } else if (!this.props.visible && prevProps.visible) {
      this.animateOut();
    }

    console.log('componentDidUpdate', prevProps)
  }

  animateIn = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  animateOut = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  loadMoreData = () => {
    

  };

  

  render() {
    const translateY = this.state.modalAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [SCREEN_HEIGHT, 0],
    });

    return (
      <Modal
        transparent
        visible={this.props.visible}
        onRequestClose={this.props.onClose}
        animationType="none"
      >
        <View style={styles.modalContainer}>
          <TouchableOpacity
            style={styles.overlay}
            activeOpacity={1}
            onPress={this.props.onClose}
          />
          <Animated.View
            style={[
              styles.contentContainer,
              { transform: [{ translateY }] }
            ]}
          >
            <View style={styles.header}>
              <Text style={styles.title}>{'卖家收款账户'}</Text>
              <TouchableOpacity
                style={{position:'absolute',right:15}}
                onPress={() => {
                  let bankStr = '收款银行：'+this.props.receivePaymentBank+'\n'
                   bankStr = bankStr+'收款账户：'+this.props.receivePaymentBankAccount+'\n'
                   bankStr = bankStr+'账户名称：'+this.props.receivePaymentAccountName
                  Clipboard.setString(bankStr)
                  ToastToUser('复制成功')
                }}>
                <Text style={styles.copyText}>一键复制</Text>
              </TouchableOpacity>
            </View>

            <View
              style={styles.bankItemContain}>
              <Text style={styles.bankItemTitle}>收款银行</Text>
              <Text style={styles.bankItemValue}>{this.props.receivePaymentBank}</Text>
            </View>
            <View
              style={styles.bankItemContain}>
              <Text style={styles.bankItemTitle}>收款账户</Text>
              <Text style={styles.bankItemValue}>{this.props.receivePaymentBankAccount}</Text>
            </View>
            <View
              style={styles.bankItemContain}>
              <Text style={styles.bankItemTitle}>账户名称</Text>
              <Text style={styles.bankItemValue}>{this.props.receivePaymentAccountName}</Text>
            </View>
            
            <View style={styles.line}></View>
            <TouchableOpacity
              style={[styles.cancelBtn, { marginBottom: Constant.bottomHeight }]}
              onPress={this.props.onClose}>
              <Text style={styles.closeButton}>取消</Text>
            </TouchableOpacity>
          </Animated.View>
        </View>
      </Modal>
    );
  }

  

}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  contentContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',

    maxHeight: SCREEN_HEIGHT * 0.8,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,

  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  closeButton: {
    fontSize: 16,
    color: '#333333',
  },
  quotationItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemHeader: {
    flexDirection: 'row',

    alignItems: 'center',
    marginBottom: 10,
  },
  userInfo: {
    flexDirection: 'column',
    flex: 1,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 48,
    backgroundColor: '#eee',
    marginRight: 10,
  },
  nameContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  userName: {
    fontSize: 16,
    color: '#333333',
    fontWeight: 'bold'
  },
  date: {
    fontSize: 14,
    color: '#999',
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  priceLabel: {
    fontSize: 16,
    color: '#ED542E',
  },
  price: {
    fontSize: 16,
    color: '#ED542E',
    fontWeight: '500',
  },
  actionButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  confirmButton: {

    paddingHorizontal: 15,
    paddingVertical: 6,
    borderRadius: 50,
    marginLeft: 10,
    borderColor: '#E5E5E5',
    borderWidth: 1
  },
  rejectButton: {
    backgroundColor: '#f5f5f5',
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 4,
    marginLeft: 10,
  },
  buttonText: {
    fontSize: 14,
    color: '#333333'
  },
  loading: {
    textAlign: 'center',
    padding: 10,
    color: '#999',
  },
  cancelBtn: {
    height: 48,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  line: {
    height: 10,
    backgroundColor: '#f6f6f6'
  },

  bankItemContain:{
    flexDirection:'row',
    height:48,
    alignItems:'center',
    justifyContent:'space-between',
    paddingHorizontal:15
  },
  bankItemTitle:{
    fontSize:14,
    color:'#333333'
  },
  bankItemValue:{
    fontSize:14,
    color:'#333333',
    fontWeight:'bold'
  },
  copyText:{
    color:'#FF7B00',
    fontSize:12
  }

});

export default BankInfoPop;